<template>
  <div class="ty-box">
    <div class="top">
      <van-search @search="sEvt(sValue)" @click-left-icon="sEvt(sValue)" v-model="sValue" background="#cccccc" placeholder="请输入你想要的商品" />
    </div>
    <div class="conter">
      <div class="left">
        <ul>
          <li :class="[cType == it && 'act']" v-for="it in typeList" @click="typeClick(it)">{{ it }}</li>
        </ul>
      </div>
      <div class="rig" ref="node">
        <div class="item">
          <div class="t">{{ cType }}</div>
          <div class="bo">
            <div class="it" v-for="it in listArr" :key="it.id" @click="detaEvt(it.id)">
              <img :src="it.img" alt="">
              <span>{{ it.type }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import { ref } from 'vue';
import { getTypeApi, getByTypeApi, getProById } from '../../apis/homeApi';
import { useRouter } from 'vue-router';
import { Ref } from 'vue';

const router = useRouter()

// 搜索框
let sValue = ref('')

// 选中类型
let cType = ref('女装')
function typeClick(it:string){
  cType.value = it
  getStyleList(cType.value)
  node.value.scrollTop = 0
}
const node = ref()

// 商品类型
let typeList = ref([])
getStyle()
async function getStyle() {
  let _res = await getTypeApi()
  typeList.value = _res.data
}
interface ListArrInfo {
  type:string;
  img:string;
  title:string;
  id:string;
}
let listArr:Ref<Array<ListArrInfo>> = ref([])
getStyleList(cType.value)
async function getStyleList(type: string) {
  let _res = await getByTypeApi(type)
  listArr.value = _res.data
}

function sEvt(val: any){
  sessionStorage.setItem('searchValue',val)
  router.push('/search')
}
/** 跳转详情页 */
async function detaEvt(id:string){
  let res = await getProById(id)
  sessionStorage.setItem('goodsId',res.data.id)
  router.push('/details')
}
</script>

<style lang="less" scoped>
@import '../../style/common.less';

.ty-box {
  position: relative;
  height: calc(100vh - 50px);

  .top {
    background-color: @c4;
  }

  .conter {
    display: flex;
    height: calc(100% - 50px);
    overflow-x: hidden;

    .left>ul {
      overflow-x: hidden;
      width: 3.5rem;
      text-align: center;
      background-color: @c4;
      line-height: 50px;
      font-size: .8rem;

      .act {
        background-color: #fff;
        font-size: 1rem;
      }
    }

    .rig {
      overflow-x: hidden;
      flex: 1;

      .item {
        padding: 10px 8px 0;
        margin-bottom: 40px;

        .t {
          font-size: .8rem;
          text-indent: 1em;
          line-height: 30px;
        }

        .bo {
          display: flex;
          flex-wrap: wrap;
          text-align: center;

          .it {
            padding: 5px;
            width: calc(100%/3);

            img {
              // width: 100%;
              // height: 140px;
              width: 70px;
              height: 70px;
              margin-left: calc(50% - 35px);
            }

            span {
              display: -webkit-box;
              height: 30px;
              text-align: center;
              font-size: .6rem;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }

}
</style>
